<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!--JSTL  -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>课程信息</title>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<script src="js/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./css/x-admin.css" media="all">
<script src="./ueditor/ueditor.config.js"></script>
<script src="./ueditor/ueditor.all.min.js"></script>
<script src="./ueditor/lang/zh-cn/zh-cn.js"></script>

<link rel="stylesheet" href="style.css">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/css/bootstrap.min.css">

<!-- FontAwesome CSS -->
<link rel="stylesheet" href="css/css/font-awesome.min.css">

<!-- ElegantFonts CSS -->
<link rel="stylesheet" href="css/css/elegant-fonts.css">

<!-- themify-icons CSS -->
<link rel="stylesheet" href="css/css/themify-icons.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="css/css/swiper.min.css">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!-- Styles -->
<style type="text/css">
.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background: transparent;
	min-width: 150px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: #19c880;
}

.dropdown:hover .dropdown-content {
	display: block;
}
</style>
</head>
<body class="single-courses-page">

	<div class="page-header">
		<header class="site-header">
			<div class="top-header-bar">
				<div class="container-fluid"></div>
				<!-- .container-fluid -->
			</div>
			<!-- .top-header-bar -->

			<div class="nav-bar">
				<div class="container">
					<div class="row">
						<div class="col-9 col-lg-3">
							<div class="site-branding">
								<h1 class="site-title">
									<a href="Main.jsp" rel="home">Emp<span>Traning</span></a>
								</h1>
							</div>
							<!-- .site-branding -->
						</div>
						<!-- .col -->

						<div
							class="col-3 col-lg-9 flex justify-content-end align-content-center">
							<nav
								class="site-navigation flex justify-content-end align-items-center">
								<ul
									class="flex flex-column flex-lg-row justify-content-lg-end align-content-center">
									<li><a href="Main.jsp">我的主页</a></li>
									<li><a href="BeforeCourses.jsp">课程浏览</a></li>
									<li>
										<div class="dropdown" id="c1">
											<a href="EmpCourseApl.jsp" class="dropbtn"
												class="current-menu-item">我的课程 <span id="down1"
												class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up1" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a
													href="CCPTServlet?op=queryByEmp&empTel=${sessionScope.username}&applyState=0">申请中</a>
												<a
													href="CCPTServlet?op=queryByEmp&empTel=${sessionScope.username}&applyState=1">已通过</a>
												<a
													href="CCPTServlet?op=queryByEmp&empTel=${sessionScope.username}&applyState=2">未通过</a>

											</div>
										</div>
									</li>
									<li class="current-menu-item"><a
										href="CourseEvaluation.jsp">课程评价</a></li>
									<li><a href="EmpScoreBefore.jsp">我的成绩</a></li>
									<li>
										<div class="dropdown">
											<a href="EmpInfo.jsp" class="dropbtn">个人中心 <span
												id="down" class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a href="EmpInfo.jsp">个人信息</a> <a href="#" id="Logout">退出登录</a>
											</div>
										</div>
									</li>
								</ul>


								<!-- .header-bar-search -->
							</nav>
							<!-- .site-navigation -->
						</div>
						<!-- .col -->
					</div>
					<!-- .row -->
				</div>
				<!-- .container -->
			</div>
			<!-- .nav-bar -->
		</header>
		<!-- .site-header -->

		<div class="page-header-overlay">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<header class="entry-header">
							<h1 class="entry-title"><%=request.getParameter("courseName")%></h1>
							<input type="hidden" id="cpNo" name="cpNo"
								value="<%=request.getParameter("cpNo")%>">

							<!-- .ratings -->
						</header>
						<!-- .entry-header -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .page-header-overlay -->
	</div>
	<!-- .page-header -->

	<div class="container">
		<div class="row">
			<div class="col-12 offset-lg-1 col-lg-10">
				<div class="featured-image">
					<img src="<%=request.getParameter("coursePic")%>" alt="">
					<%
						String s = request.getParameter("courseStatus");
						String c = "";
						if (s.equals("1")) {
							c = "招募中";
						} else if (s.equals("2")) {
							c = "开课中";
						} else if (s.equals("3")) {
							c = "已结课";
						} else if (s.equals("4")) {
							c = "已取消";
						} else {
							c = "已满员";
						}
					%>
					<div class="course-cost"><%=c%></div>
				</div>
			</div>
			<!-- .col -->
		</div>
		<!-- .row -->

		<div class="row">
			<div class="col-12 offset-lg-1 col-lg-1">

				<!-- .post-share -->
			</div>
			<!-- .col -->

			<div class="col-12 col-lg-8">
				<div class="single-course-wrap">
					<div class="course-info flex flex-wrap align-items-center">
						<div class="course-author flex flex-wrap align-items-center mt-3">
							<img src=" <%=request.getParameter("teacherPic")%>" alt="">

							<div class="author-wrap">
								<label class="m-0">Teacher</label>
								<div class="author-name">
									<a href="#">Ms. <%=request.getParameter("teacherName")%></a>
								</div>
							</div>
							<!-- .author-wrap -->
						</div>
						<!-- .course-author -->

						<div class="course-cats mt-3">
							<label class="m-0">Categories</label>
							<div class="author-name">
								<a href="#" id="subJectmsg"><%=request.getParameter("subJect")%></a>
							</div>
						</div>
						<!-- .course-cats -->

						<div class="course-students mt-3">
							<label class="m-0">最大人数</label>
							<div class="author-name">
								<a href="#"><%=request.getParameter("courseNum")%></a>
							</div>
						</div>
						<div class="course-students mt-3">
							<label class="m-0">现参加人数</label>
							<div class="author-name">
								<a href="#"><%=request.getParameter("courseNowNum")%></a>
							</div>
						</div>
						<!-- .course-students -->


						<!-- .buy-course -->
					</div>
					<!-- .course-info -->

					<div class="single-course-cont-section">
						<h2>课程简介：</h2>
						<ul class="p-0 m-0 green-ticked">

							<!-- 一个“。”句号分成一个li -->
							<%
								String str1 = request.getParameter("courseDesc");
								String[] str2 = str1.split("。");
								for (int i = 0; i < str2.length; i++) {
							%>
							<li><%=str2[i]%></li>
							<%
								}
							%>
						</ul>

						<h2>课程安排：</h2>

						<ul class="p-0 m-0 black-doted">
							<li>开始时间：<%=request.getParameter("courseStart")%></li>
							<li>结束时间：<%=request.getParameter("courseEnd")%></li>
							<li>上课时间：<%=request.getParameter("courseTime")%></li>
							<li>上课地点：<%=request.getParameter("coursePlace")%></li>
						</ul>

					</div>



					<div class="instructors-info">
						<header class="entry-heading">
							<h2 class="entry-title">给老师评分</h2>
						</header>
						<!-- .entry-heading -->

						<div class="instructor-short-info flex flex-wrap">
							<div class="instructors-stats">
								<img src=" <%=request.getParameter("teacherPic")%>" alt="">

								<ul class="p-0 m-0 mt-3">
									<li><i class="fa fa-user"></i> <%=request.getParameter("teacherSex")%></li>
									<li><i class="fa fa-star"></i> <%=request.getParameter("teacherXl")%></li>
									<li><i class="fa fa-comment"></i> <%=request.getParameter("teacherTel")%></li>

								</ul>
							</div>
							<!-- .instructors-stats -->

							<div class="instructors-details">

								<!-- .ratings -->

								<h2 class="entry-title mt-3"><%=request.getParameter("courseName")%></h2>

								<div class="course-teacher mt-3">
									Teacher: <a href="#">Ms. <%=request.getParameter("teacherName")%></a>

								</div>
								<!-- .course-teacher -->

								<div class="entry-content mt-3">
									<div id="test3"></div>
									&nbsp;&nbsp;&nbsp;
									<button type="button" id="btn_eva"
										class="layui-btn layui-btn-sm">提交</button>

								</div>
								<!-- .entry-content -->
							</div>
							<!-- .instructors-details -->
						</div>
						<!-- .instructor-short-info -->
					</div>
					<!-- .instructors-info -->


					<!-- 评价课程 -->

					<div class="post-comments-wrap">
						<div class="post-comments">
							<h3 class="comments-title">
								<span class="comments-number">评价课程</span>
							</h3>
							<div class="comments-form">
								<div class="comment-respond">
									<form class="comment-form">

										<textarea rows="4" placeholder="请输入您的评价内容" id="txt_cont"></textarea>
										<input type="hidden" id="empNo" name="empNo" value="">
										<input type="hidden" id="courseNo" value=""> <input
											type="checkbox" name="Noname" id="Noname" value="2" /><label
											for="Noname">匿名评价</label>

										<button type="button" id="btn_course" class="layui-btn">发表评价</button>
									</form>
									<!-- .comment-form -->
								</div>
								<!-- .comment-respond -->
							</div>
							<!-- .comments-form -->
							<!-- 判断是否为空 -->
							<c:if test="${pd!=null}">

								<!-- 遍历 -->
								<c:forEach items="${pd.data}" var="CourseEva">
									<c:if test="${CourseEva.evalState==1}">
										<ol class="comment-list" id="jiazai">



										</ol>
										<!-- .comment-list -->
									</c:if>
								</c:forEach>
							</c:if>
						</div>
						<!-- .post-comments -->


					</div>

					<div class="related-courses">
						<header
							class="entry-heading flex flex-wrap justify-content-between align-items-center">
							<h2 class="entry-title">相关类型课程</h2>

							<a
								href="CCPTServlet?op=queryByPage&keywords=<%=request.getParameter("subJect")%>">查看所有</a>
						</header>
						<!-- .entry-heading -->
						<div class="row mx-m-25" id="rc" style="margin-bottom: 150px">

							<!-- 2个相关类型新闻 -->

						</div>
						<!-- .row -->
					</div>
					<!-- .related-course -->
				</div>
				<!-- .single-course-wrap -->
			</div>
			<!-- .col -->
		</div>
		<!-- .row -->
	</div>
	<!-- .container -->
	<!-- 隐藏域取值 -->
	<input type="hidden" value="${sessionScope.empNo}" id="getempNo">
	<input type="hidden" value="<%=request.getParameter("cpNo")%>"
		id="getcpNo">
	<input type="hidden" value="<%=request.getParameter("teacherNo")%>"
		id="getteacherNo">
	<!-- 对获取的值进行处理 -->
	<%
		int star2 = 0;
		if (request.getAttribute("msgs") != null) {
			String msgs = (String) request.getAttribute("msgs");
			double star1 = Double.parseDouble(msgs);
			star2 = (int) star1;

		}
	%>

	<script type='text/javascript' src='js/js/jquery.js'></script>
	<script type='text/javascript' src='js/js/swiper.min.js'></script>
	<script type='text/javascript' src='js/js/masonry.pkgd.min.js'></script>
	<script type='text/javascript' src='js/js/jquery.collapsible.min.js'></script>
	<script type='text/javascript' src='js/js/custom.js'></script>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>

	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script src="layui/layui.js" charset="utf-8"></script>

	<script>
		var star = 0;
		var empNo = $("#getempNo").val();
		var cpNo = $("#getcpNo").val();
		var teacherNo = $("#getteacherNo").val();
		layui.use('rate', function() {
			var rate = layui.rate;

			//评分
			var ins1 = rate.render({
				elem : '#test3',//绑定元素
				value :
	<%=star2 == 0 ? 0 : star2%>
		,//初始值
				text : true,
				choose : function(value) {
					//赋值
					star = value;
				}
			});

		});
		layui
				.use(
						[ 'layer' ],
						function() {
							$ = layui.jquery;//jquery
							layer = layui.layer;//弹出层
							//异步更新，老师评分
							$("#btn_eva")
									.click(
											function() {
												if (star == 0) {
													layer.msg("请选择评价分数", {
														icon : 5,
														time : 2000
													});
												} else {
													$
															.ajax({
																type : "post",
																url : "TeacherEvaServlet?op=doTeacherEva",
																data : {

																	empNo : empNo,
																	cpNo : cpNo,
																},
																dataType : "json",
																success : function(
																		data) {
																	if (data.flag == true) {
																		//判断这个评分是不是第一次提交
																		layer
																				.confirm(
																						'一次课程，评分只能评一次，请问确定提交吗？',
																						function(
																								index) {
																							//发异步把用户状态进行更改
																							$
																									.ajax({
																										type : "post",
																										url : "TeacherEvaServlet?op=add",
																										data : {
																											evalScore : star,
																											empNo : empNo,
																											cpNo : cpNo,
																											teacherNo : teacherNo
																										},
																										dataType : "json",
																										success : function(
																												data) {
																											if (data.flag == true) {
																												layer
																														.msg(
																																"提交成功，感谢您的评价！",
																																{
																																	icon : 1,
																																	time : 1000
																																});

																											} else {
																												layer
																														.msg(
																																"提交成功，感谢您的评价！",
																																{
																																	icon : 1,
																																	time : 2000
																																});

																											}
																										}
																									});

																						});

																	} else {
																		layer
																				.msg(
																						"提交失败，您已评价过，不能再次评价！",
																						{
																							icon : 5,
																							time : 2000
																						});

																	}
																}
															});
												}

											});
							//异步更新，课程评价

							$("#btn_course").click(function() {
								var cstate = $("#Noname").prop("checked");

								$.ajax({
									type : "post",
									url : "CourseEvaServlet?op=add",
									data : {
										evalContent : $("#txt_cont").val(),
										empNo : empNo,
										cpNo : cpNo,

										evalState : (cstate == true ? 2 : 1),

									},
									dataType : "json",
									success : function(data) {
										if (data == true) {
											layer.msg("提交成功，感谢您的评价！", {
												icon : 1,
												time : 1000
											});
											//清空文本框内容
											$("#txt_cont").val("");
											setTimeout(function() {
												window.location.reload();

											}, 1000);
										} else {
											layer.msg("提交失败", {
												icon : 5,
												time : 2000
											});

										}
									}
								});
							});
						});
		//流加载
		layui
				.use(
						'flow',
						function() {
							var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
							var flow = layui.flow;
							flow
									.load({
										elem : '#jiazai' //指定列表容器
										,
										isAuto : false,
										isLazyimg : true,
										done : function(page, next) { //到达临界点（默认滚动触发），触发下一页

											var lis = [];
											//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
											$
													.get(
															'CourseEvaServlet?op=queryByCpNoAjax&page='
																	+ page
																	+ "&cpNo="
																	+ cpNo,
															function(pd) {
																var total = 0;

																// 注意执行这个方法之前确保我们的 totalCount有值
																if (pd.totalCount
																		% pd.pageSize == 0) {
																	total = pd.totalCount
																			/ pd.pageSize;
																} else {
																	total = pd.totalCount
																			/ pd.pageSize
																			+ 1;
																}
																console
																		.log(total);
																//假设你的列表返回在data集合中
																layui
																		.each(
																				pd.data,
																				function(
																						index,
																						CourseEva) {
																					lis
																							.push('<li class="comment"><article class="comment-body"><figure class="comment-author-avatar"><img src="'+CourseEva.empPic+'" alt="头像"></figure><div class="comment-wrap"><div class="comment-author"><span class="comment-meta d-block"><a>'
																									+ CourseEva.evalDate
																									+ '</a></span><span class="fn"> 姓名：<a>'
																									+ CourseEva.empName
																									+ '</a></span></div><p>'
																									+ CourseEva.evalContent
																									+ '</p></div><div class="clearfix"></div></article> </li>');
																				});

																//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
																//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
																next(
																		lis
																				.join(''),
																		page < parseInt(total));
															});
										}
									});
						});
	</script>
	<script>
		$(".dropdown").mouseover(function() {
			$("#down").css('display', 'none');
			$("#up").css('display', 'block');
		});
		$(".dropdown").mouseout(function() {
			$("#down").css('display', 'block');
			$("#up").css('display', 'none');
		});
	</script>

	<script>
		$(function() {
			//课程类型
			$
					.get(
							"CCPTServlet?op=queryByPage1&keywords="
									+ $("#subJectmsg").text(),
							function(data) {
								var i = 0;
								$
										.each(
												$.parseJSON(data),
												function(index, rc) {
													if (rc.cpNo != $("#cpNo")
															.val()
															&& i < 2) {
														console.log(rc.cpNo);
														console.log($("#cpNo")
																.val());
														i++;
														$("#rc")
																.append(
																		"<div class='col-12 col-md-6 px-25'>"
																				+ "<div class='course-content'>"
																				+ "<figure class='course-thumbnail'>"
																				+ "<a href='#'><img src='"+rc.coursePic+"'alt=''></a>"
																				+ "</figure>"
																				+ "<div class='course-content-wrap'>"
																				+ "<header class='entry-header'>"
																				+ "<h2 class='entry-title'>"
																				+ "<a href='SingleCourses.jsp?"
																				+ "courseName="
																				+ rc.courseName
																				+ "&cpNo="
																				+ rc.cpNo
																				+ "&coursePic="
																				+ rc.coursePic
																				+ "&courseStatus="
																				+ rc.courseStatus
																				+ "&subJect="
																				+ rc.subJect
																				+ "&teacherPic="
																				+ rc.teacherPic
																				+ "&teacherName="
																				+ rc.teacherName
																				+ "&courseNum="
																				+ rc.courseNum
																				+ "&courseDesc="
																				+ rc.courseDesc
																				+ "&courseStart="
																				+ rc.courseStart
																				+ "&courseEnd="
																				+ rc.courseEnd
																				+ "&courseTime="
																				+ rc.courseTime
																				+ "&coursePlace="
																				+ rc.coursePlace
																				+ "&teacherXl="
																				+ rc.teacherXl
																				+ "&teacherSex="
																				+ rc.teacherSex
																				+ "&teacherTel="
																				+ rc.teacherTel
																				+ "&teacherDesc="
																				+ rc.teacherDesc
																				+ "'>"
																				+ rc.courseName
																				+ "</a>"
																				+ "</h2>"
																				+ "<div class='entry-meta flex flex-wrap align-items-center'>"
																				+ "<div class='course-author'>"
																				+ "<a href='#'>Ms."
																				+ rc.teacherName
																				+ "</a>"
																				+ "</div>"
																				+ "<div class='course-date'>"
																				+ rc.courseStart
																				+ "</div>"
																				+ "</div>"
																				+ "</header>"
																				+ "<footer class='entry-footer flex flex-wrap justify-content-between align-items-center'>"
																				+ "<div class='course-cost'>"
																				+ rc.subJect
																				+ "</div>"
																				+ "</footer>"
																				+ "</div>"
																				+ "</div>"
																				+ "</div>");
													}
												});
							});
		});
	</script>
	<!--退出登录-->
	<script>
		layui
				.use(
						[ 'layer' ],
						function() {
							$ = layui.jquery;//jquery
							layer = layui.layer;//弹出层
							$("#Logout")
									.click(
											function() {
												layer
														.confirm(
																'确认要退出登录吗？',
																function(index) {
																	$
																			.ajax({
																				url : "LoginServlet",
																				type : "get",
																				data : {
																					op1 : "logout"
																				},
																				success : function(
																						data) {
																					if (data.code == 1) {
																						location.href = "http://localhost:8080/EmpTrainingTest/Login.jsp";
																						return false;
																					}
																				},
																				dataType : "json"
																			});
																});
											});
						});
	</script>
</body>
</html>